<template>
  <div class="app-container">
    <gantt class="left-container" :tasks="tasks" :columns="columns" />
  </div>
</template>
<script>
import Gantt from '@/components/Gantt/Gantt.vue'

export default {
  name: 'GanttView',
  components: { Gantt },
  data() {
    return {
      columns: [
        { name: 'text', label: '任务名称', width: '100%' },
        { name: 'start_date', label: '开始时间', align: 'center' },
        { name: 'duration', label: '任务持续时间', width: '70px', align: 'center' },
        { name: 'add-task', label: '', width: '50px', align: 'center' },
        { name: 'person', label: '资源名称', width: '50px', align: 'center' }
      ],
      tasks: {
        data: [
          { id: 1, text: '立项阶段', start_date: '2020-01-17', end_date: '2020-02-17', progress: 0.6 },
          { id: 11, text: '行内立项', start_date: '2020-01-20', duration: 3, progress: 0.4, parent: 1 },
          { id: 2, text: '需求阶段', start_date: '2020-01-20', duration: 3, progress: 0.4 },
          { id: 3, text: '开发阶段', start_date: '2020-01-20', duration: 3, progress: 0.4 },
          { id: 4, text: '测试阶段', start_date: '2020-01-20', duration: 3, progress: 0.4 },
          { id: 5, text: '实施阶段', start_date: '2020-01-20', duration: 3, progress: 0.4 },
          { id: 6, text: '试运行阶段', start_date: '2020-01-20', duration: 3, progress: 0.4 }
        ],
        links: [
          { id: 1, source: 1, target: 2, type: '0' }
        ],
        messages: []
      }
    }
  },
  methods: {
    addMessage(message) {
      this.messages.unshift(message)
      if (this.messages.length > 40) {
        this.messages.pop()
      }
    },

    logTaskUpdate(id, mode, task) {
      const text = (task && task.text ? ` (${task.text})` : '')
      const message = `Task ${mode}: ${id} ${text}`
      this.addMessage(message)
    },

    logLinkUpdate(id, mode, link) {
      let message = `Link ${mode}: ${id}`
      if (link) {
        message += ` ( source: ${link.source}, target: ${link.target} )`
      }
      this.addMessage(message)
    }
  }
}
</script>

<style>
.app-container {
  height: calc(100vh - 100px);
}
.left-container {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.right-container {
  border-right: 1px solid #cecece;
  float: right;
  height: 100%;
  width: 340px;
  box-shadow: 0 0 5px 2px #aaa;
  position: relative;
  z-index:2;
}
.gantt-messages {
  list-style-type: none;
  height: 50%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-left: 5px;
}
.gantt-messages > .gantt-message {
  background-color: #f4f4f4;
  box-shadow:inset 5px 0 #d69000;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 14px;
  margin: 5px 0;
  padding: 8px 0 8px 10px;
}
</style>
